<template>
  <div>
    <div class="introduction-container">
        <div class="desc-info-text" :class="{'introduction-close':isClose}">
            <span ref="iContainer">{{ detailList.introduction }}</span>
        </div>
        <div v-show="showClose" class="toggle-show" style="cursor: pointer;" @click="changeClose">
            <span class="hover-blue change-color">{{ closeMsg }}</span>
        </div>
    </div>

    <!--标签-->
    <div class="video-tag-container">
      <input id="toggle" style="display: none;" type="checkbox"/>
      <div class="tag-panel" ref="getHeight">
        <!--参与话题 只有一个-->
        <div class="tag not-btn-tag" v-if="participate != ''">
          <div class="topic-tag">
            <a href="#" target="_blank" :title="participate" class="tag-link topic-link">
              <svg style="color: #00AEEC" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="tag-icon topic-tag-icon" data-v-d4f766a8=""><path fill-rule="evenodd" clip-rule="evenodd" d="M5.15142 1.70791C5.36429 1.56008 5.6567 1.61281 5.80453 1.82568L6.92003 3.432C7.26888 3.42615 7.62969 3.42286 8.00007 3.42286C8.3704 3.42286 8.73116 3.42615 9.07998 3.432L10.1955 1.82568C10.3433 1.61281 10.6357 1.56008 10.8486 1.70791C11.0615 1.85574 11.1142 2.14814 10.9664 2.36102L10.203 3.46026C10.9526 3.48536 11.6215 3.52013 12.1791 3.5552C13.4364 3.63429 14.4433 4.60659 14.5376 5.87199C14.5966 6.66359 14.648 7.66253 14.648 8.7412C14.648 9.82395 14.5962 10.8185 14.5369 11.6027C14.4427 12.8488 13.4594 13.8117 12.2205 13.903C11.156 13.9815 9.67595 14.0596 8.00007 14.0596C6.32435 14.0596 4.8444 13.9815 3.77995 13.903C2.54085 13.8117 1.55749 12.8486 1.46327 11.6024C1.40396 10.8179 1.35214 9.82325 1.35214 8.7412C1.35214 7.66322 1.40358 6.66415 1.46258 5.87228C1.55688 4.60679 2.56384 3.63427 3.82138 3.55518C4.3788 3.52012 5.04762 3.48536 5.79702 3.46027L5.03365 2.36102C4.88582 2.14814 4.93855 1.85574 5.15142 1.70791ZM8.00007 4.36139C6.36941 4.36139 4.92598 4.4261 3.88029 4.49186C3.08157 4.5421 2.45732 5.15291 2.39852 5.94202C2.34078 6.71684 2.29067 7.69194 2.29067 8.7412C2.29067 9.79434 2.34115 10.7648 2.39913 11.5316C2.45778 12.3074 3.06585 12.9093 3.84894 12.967C4.89619 13.0442 6.35249 13.121 8.00007 13.121C9.6478 13.121 11.1042 13.0442 12.1515 12.967C12.9345 12.9093 13.5424 12.3075 13.6011 11.5319C13.659 10.7654 13.7095 9.79506 13.7095 8.7412C13.7095 7.69122 13.6594 6.71625 13.6017 5.94173C13.5429 5.15277 12.9188 4.54211 12.1201 4.49188C11.0744 4.42611 9.63088 4.36139 8.00007 4.36139ZM4.55172 7.40615C4.55172 7.16699 4.74559 6.97312 4.98475 6.97312H6.52431L6.69171 5.74556C6.72402 5.5086 6.94231 5.3427 7.17928 5.37501C7.41624 5.40732 7.58214 5.62562 7.54983 5.86258L7.39839 6.97312H8.92735L9.09475 5.74556C9.12706 5.5086 9.34535 5.3427 9.58231 5.37501C9.81928 5.40732 9.98518 5.62562 9.95287 5.86258L9.80143 6.97312H10.8589C11.0981 6.97312 11.2919 7.16699 11.2919 7.40615C11.2919 7.64531 11.0981 7.83918 10.8589 7.83918H9.68333L9.43736 9.643H10.8589C11.0981 9.643 11.2919 9.83688 11.2919 10.076C11.2919 10.3152 11.0981 10.5091 10.8589 10.5091H9.31926L9.15184 11.7367C9.11953 11.9737 8.90124 12.1396 8.66428 12.1073C8.42731 12.075 8.26141 11.8567 8.29372 11.6197L8.44518 10.5091H6.91622L6.74881 11.7367C6.71649 11.9737 6.4982 12.1396 6.26124 12.1073C6.02427 12.075 5.85837 11.8567 5.89068 11.6197L6.04214 10.5091H4.98475C4.74559 10.5091 4.55172 10.3152 4.55172 10.076C4.55172 9.83688 4.74559 9.643 4.98475 9.643H6.16024L6.40621 7.83918H4.98475C4.74559 7.83918 4.55172 7.64531 4.55172 7.40615ZM8.56328 9.643L8.80925 7.83918H7.28029L7.03432 9.643H8.56328Z" fill="currentColor"></path><path d="M5.80453 1.82568L5.92773 1.74012V1.74012L5.80453 1.82568ZM5.15142 1.70791L5.23698 1.83111L5.15142 1.70791ZM6.92003 3.432L6.79682 3.51756L6.84249 3.58332L6.92254 3.58198L6.92003 3.432ZM9.07998 3.432L9.07746 3.58198L9.15752 3.58332L9.20318 3.51756L9.07998 3.432ZM10.1955 1.82568L10.0723 1.74012V1.74012L10.1955 1.82568ZM10.8486 1.70791L10.9341 1.5847L10.9341 1.5847L10.8486 1.70791ZM10.9664 2.36102L10.8432 2.27546V2.27546L10.9664 2.36102ZM10.203 3.46026L10.0798 3.37471L9.92266 3.60096L10.198 3.61018L10.203 3.46026ZM12.1791 3.5552L12.1885 3.4055L12.1791 3.5552ZM14.5376 5.87199L14.388 5.88314L14.5376 5.87199ZM14.5369 11.6027L14.6865 11.614V11.614L14.5369 11.6027ZM12.2205 13.903L12.2315 14.0526L12.2205 13.903ZM3.77995 13.903L3.79097 13.7534L3.77995 13.903ZM1.46327 11.6024L1.61285 11.5911L1.46327 11.6024ZM1.46258 5.87228L1.61217 5.88343L1.46258 5.87228ZM3.82138 3.55518L3.83079 3.70489L3.82138 3.55518ZM5.79702 3.46027L5.80204 3.61019L6.07735 3.60097L5.92022 3.37471L5.79702 3.46027ZM5.03365 2.36102L5.15685 2.27546L5.03365 2.36102ZM3.88029 4.49186L3.8897 4.64157L3.88029 4.49186ZM2.39852 5.94202L2.5481 5.95317L2.39852 5.94202ZM2.39913 11.5316L2.24956 11.543L2.39913 11.5316ZM3.84894 12.967L3.83791 13.1166H3.83791L3.84894 12.967ZM12.1515 12.967L12.1625 13.1166L12.1515 12.967ZM13.6011 11.5319L13.7506 11.5433L13.6011 11.5319ZM13.6017 5.94173L13.7513 5.93058L13.6017 5.94173ZM12.1201 4.49188L12.1296 4.34218L12.1201 4.49188ZM6.52431 6.97312V7.12312H6.65525L6.67294 6.99339L6.52431 6.97312ZM6.69171 5.74556L6.54308 5.7253L6.69171 5.74556ZM7.17928 5.37501L7.15901 5.52364L7.15901 5.52364L7.17928 5.37501ZM7.54983 5.86258L7.4012 5.84231L7.54983 5.86258ZM7.39839 6.97312L7.24977 6.95285L7.22655 7.12312H7.39839V6.97312ZM8.92735 6.97312V7.12312H9.05829L9.07598 6.99339L8.92735 6.97312ZM9.09475 5.74556L8.94612 5.7253L9.09475 5.74556ZM9.58231 5.37501L9.56205 5.52364L9.56205 5.52364L9.58231 5.37501ZM9.95287 5.86258L10.1015 5.88285V5.88285L9.95287 5.86258ZM9.80143 6.97312L9.65281 6.95285L9.62959 7.12312H9.80143V6.97312ZM9.68333 7.83918V7.68918H9.5524L9.53471 7.81891L9.68333 7.83918ZM9.43736 9.643L9.28873 9.62274L9.26551 9.793H9.43736V9.643ZM9.31926 10.5091V10.3591H9.18832L9.17063 10.4888L9.31926 10.5091ZM9.15184 11.7367L9.30047 11.757L9.15184 11.7367ZM8.29372 11.6197L8.44235 11.64V11.64L8.29372 11.6197ZM8.44518 10.5091L8.5938 10.5293L8.61702 10.3591H8.44518V10.5091ZM6.91622 10.5091V10.3591H6.78528L6.76759 10.4888L6.91622 10.5091ZM6.74881 11.7367L6.89743 11.757V11.757L6.74881 11.7367ZM5.89068 11.6197L6.03931 11.64V11.64L5.89068 11.6197ZM6.04214 10.5091L6.19076 10.5293L6.21398 10.3591H6.04214V10.5091ZM6.16024 9.643V9.793H6.29117L6.30886 9.66327L6.16024 9.643ZM6.40621 7.83918L6.55484 7.85945L6.57806 7.68918H6.40621V7.83918ZM8.56328 9.643V9.793H8.69421L8.7119 9.66327L8.56328 9.643ZM8.80925 7.83918L8.95788 7.85945L8.98109 7.68918H8.80925V7.83918ZM7.28029 7.83918V7.68918H7.14936L7.13167 7.81891L7.28029 7.83918ZM7.03432 9.643L6.88569 9.62274L6.86247 9.793H7.03432V9.643ZM5.92773 1.74012C5.73265 1.4592 5.34678 1.38962 5.06586 1.5847L5.23698 1.83111C5.38181 1.73054 5.58075 1.76641 5.68132 1.91124L5.92773 1.74012ZM7.04323 3.34644L5.92773 1.74012L5.68132 1.91124L6.79682 3.51756L7.04323 3.34644ZM8.00007 3.27286C7.62881 3.27286 7.26716 3.27616 6.91751 3.28202L6.92254 3.58198C7.27061 3.57614 7.63058 3.57286 8.00007 3.57286V3.27286ZM9.08249 3.28202C8.73289 3.27615 8.37129 3.27286 8.00007 3.27286V3.57286C8.36952 3.57286 8.72944 3.57614 9.07746 3.58198L9.08249 3.28202ZM10.0723 1.74012L8.95677 3.34644L9.20318 3.51756L10.3187 1.91124L10.0723 1.74012ZM10.9341 1.5847C10.6532 1.38962 10.2674 1.4592 10.0723 1.74012L10.3187 1.91124C10.4193 1.76641 10.6182 1.73054 10.763 1.83111L10.9341 1.5847ZM11.0896 2.44657C11.2846 2.16566 11.2151 1.77978 10.9341 1.5847L10.763 1.83111C10.9079 1.93169 10.9437 2.13063 10.8432 2.27546L11.0896 2.44657ZM10.3262 3.54582L11.0896 2.44657L10.8432 2.27546L10.0798 3.37471L10.3262 3.54582ZM12.1885 3.4055C11.6297 3.37035 10.9592 3.3355 10.208 3.31035L10.198 3.61018C10.9459 3.63522 11.6134 3.66992 12.1696 3.7049L12.1885 3.4055ZM14.6872 5.86084C14.5872 4.51923 13.5191 3.48919 12.1885 3.4055L12.1696 3.7049C13.3537 3.77938 14.2994 4.69395 14.388 5.88314L14.6872 5.86084ZM14.798 8.7412C14.798 7.65794 14.7464 6.65518 14.6872 5.86084L14.388 5.88314C14.4468 6.67201 14.498 7.66712 14.498 8.7412H14.798ZM14.6865 11.614C14.746 10.827 14.798 9.82857 14.798 8.7412H14.498C14.498 9.81933 14.4464 10.81 14.3874 11.5914L14.6865 11.614ZM12.2315 14.0526C13.5433 13.9559 14.5866 12.9353 14.6865 11.614L14.3874 11.5914C14.2988 12.7622 13.3756 13.6674 12.2095 13.7534L12.2315 14.0526ZM8.00007 14.2095C9.68045 14.2095 11.1643 14.1313 12.2315 14.0526L12.2095 13.7534C11.1477 13.8317 9.67145 13.9096 8.00007 13.9096V14.2095ZM3.76892 14.0526C4.83613 14.1313 6.31985 14.2095 8.00007 14.2095V13.9096C6.32885 13.9096 4.85268 13.8317 3.79097 13.7534L3.76892 14.0526ZM1.3137 11.6137C1.4136 12.9351 2.45699 13.9559 3.76892 14.0526L3.79097 13.7534C2.6247 13.6675 1.70137 12.762 1.61285 11.5911L1.3137 11.6137ZM1.20214 8.7412C1.20214 9.82787 1.25418 10.8264 1.3137 11.6137L1.61285 11.5911C1.55375 10.8094 1.50214 9.81863 1.50214 8.7412H1.20214ZM1.313 5.86114C1.25379 6.65573 1.20214 7.65863 1.20214 8.7412H1.50214C1.50214 7.66781 1.55337 6.67257 1.61217 5.88343L1.313 5.86114ZM3.81196 3.40548C2.48116 3.48918 1.41297 4.51944 1.313 5.86114L1.61217 5.88343C1.70079 4.69413 2.64653 3.77937 3.83079 3.70489L3.81196 3.40548ZM5.792 3.31035C5.04096 3.3355 4.37067 3.37034 3.81196 3.40548L3.83079 3.70489C4.38693 3.66991 5.05427 3.63522 5.80204 3.61019L5.792 3.31035ZM4.91044 2.44657L5.67381 3.54583L5.92022 3.37471L5.15685 2.27546L4.91044 2.44657ZM5.06586 1.5847C4.78494 1.77978 4.71536 2.16566 4.91044 2.44657L5.15685 2.27546C5.05628 2.13063 5.09215 1.93169 5.23698 1.83111L5.06586 1.5847ZM3.8897 4.64157C4.93303 4.57595 6.37324 4.51139 8.00007 4.51139V4.21139C6.36558 4.21139 4.91892 4.27624 3.87087 4.34216L3.8897 4.64157ZM2.5481 5.95317C2.60124 5.24009 3.16442 4.68718 3.8897 4.64157L3.87087 4.34216C2.99872 4.39701 2.3134 5.06573 2.24893 5.93088L2.5481 5.95317ZM2.44067 8.7412C2.44067 7.69653 2.49057 6.72526 2.5481 5.95317L2.24893 5.93088C2.191 6.70842 2.14067 7.68735 2.14067 8.7412H2.44067ZM2.54871 11.5203C2.49094 10.7563 2.44067 9.78971 2.44067 8.7412H2.14067C2.14067 9.79896 2.19137 10.7733 2.24956 11.543L2.54871 11.5203ZM3.85996 12.8174C3.14984 12.7651 2.60168 12.221 2.54871 11.5203L2.24956 11.543C2.31389 12.3938 2.98186 13.0535 3.83791 13.1166L3.85996 12.8174ZM8.00007 12.971C6.35699 12.971 4.90446 12.8944 3.85996 12.8174L3.83791 13.1166C4.88791 13.194 6.348 13.271 8.00007 13.271V12.971ZM12.1405 12.8174C11.0959 12.8944 9.6433 12.971 8.00007 12.971V13.271C9.6523 13.271 11.1125 13.194 12.1625 13.1166L12.1405 12.8174ZM13.4515 11.5206C13.3985 12.2211 12.8505 12.7651 12.1405 12.8174L12.1625 13.1166C13.0185 13.0535 13.6863 12.3939 13.7506 11.5433L13.4515 11.5206ZM13.5595 8.7412C13.5595 9.79044 13.5092 10.7569 13.4515 11.5206L13.7506 11.5433C13.8088 10.7739 13.8595 9.79968 13.8595 8.7412H13.5595ZM13.4521 5.95287C13.5096 6.72466 13.5595 7.69581 13.5595 8.7412H13.8595C13.8595 7.68663 13.8092 6.70783 13.7513 5.93058L13.4521 5.95287ZM12.1107 4.64159C12.8359 4.6872 13.399 5.23996 13.4521 5.95287L13.7513 5.93058C13.6868 5.06558 13.0016 4.39703 12.1296 4.34218L12.1107 4.64159ZM8.00007 4.51139C9.62705 4.51139 11.0674 4.57596 12.1107 4.64159L12.1296 4.34218C11.0815 4.27626 9.63471 4.21139 8.00007 4.21139V4.51139ZM4.98475 6.82312C4.66275 6.82312 4.40172 7.08415 4.40172 7.40615H4.70172C4.70172 7.24984 4.82844 7.12312 4.98475 7.12312V6.82312ZM6.52431 6.82312H4.98475V7.12312H6.52431V6.82312ZM6.54308 5.7253L6.37569 6.95285L6.67294 6.99339L6.84033 5.76583L6.54308 5.7253ZM7.19954 5.22639C6.8805 5.18288 6.58659 5.40625 6.54308 5.7253L6.84033 5.76583C6.86145 5.61095 7.00413 5.50252 7.15901 5.52364L7.19954 5.22639ZM7.69845 5.88285C7.74196 5.5638 7.51859 5.26989 7.19954 5.22639L7.15901 5.52364C7.31389 5.54476 7.42232 5.68743 7.4012 5.84231L7.69845 5.88285ZM7.54702 6.99339L7.69845 5.88285L7.4012 5.84231L7.24977 6.95285L7.54702 6.99339ZM8.92735 6.82312H7.39839V7.12312H8.92735V6.82312ZM9.07598 6.99339L9.24337 5.76583L8.94612 5.7253L8.77873 6.95285L9.07598 6.99339ZM9.24337 5.76583C9.26449 5.61095 9.40717 5.50252 9.56205 5.52364L9.60258 5.22639C9.28353 5.18288 8.98963 5.40625 8.94612 5.7253L9.24337 5.76583ZM9.56205 5.52364C9.71693 5.54476 9.82536 5.68743 9.80424 5.84231L10.1015 5.88285C10.145 5.5638 9.92163 5.26989 9.60258 5.22639L9.56205 5.52364ZM9.80424 5.84231L9.65281 6.95285L9.95006 6.99339L10.1015 5.88285L9.80424 5.84231ZM10.8589 6.82312H9.80143V7.12312H10.8589V6.82312ZM11.4419 7.40615C11.4419 7.08415 11.1809 6.82312 10.8589 6.82312V7.12312C11.0152 7.12312 11.1419 7.24984 11.1419 7.40615H11.4419ZM10.8589 7.98918C11.1809 7.98918 11.4419 7.72815 11.4419 7.40615H11.1419C11.1419 7.56246 11.0152 7.68918 10.8589 7.68918V7.98918ZM9.68333 7.98918H10.8589V7.68918H9.68333V7.98918ZM9.53471 7.81891L9.28873 9.62274L9.58598 9.66327L9.83195 7.85945L9.53471 7.81891ZM10.8589 9.493H9.43736V9.793H10.8589V9.493ZM11.4419 10.076C11.4419 9.75404 11.1809 9.493 10.8589 9.493V9.793C11.0152 9.793 11.1419 9.91972 11.1419 10.076H11.4419ZM10.8589 10.6591C11.1809 10.6591 11.4419 10.398 11.4419 10.076H11.1419C11.1419 10.2323 11.0152 10.3591 10.8589 10.3591V10.6591ZM9.31926 10.6591H10.8589V10.3591H9.31926V10.6591ZM9.17063 10.4888L9.00322 11.7165L9.30047 11.757L9.46788 10.5293L9.17063 10.4888ZM9.00322 11.7165C8.9821 11.8714 8.83942 11.9798 8.68454 11.9587L8.64401 12.2559C8.96306 12.2994 9.25696 12.0761 9.30047 11.757L9.00322 11.7165ZM8.68454 11.9587C8.52966 11.9376 8.42123 11.7949 8.44235 11.64L8.1451 11.5995C8.10159 11.9185 8.32496 12.2124 8.64401 12.2559L8.68454 11.9587ZM8.44235 11.64L8.5938 10.5293L8.29655 10.4888L8.1451 11.5995L8.44235 11.64ZM6.91622 10.6591H8.44518V10.3591H6.91622V10.6591ZM6.89743 11.757L7.06484 10.5293L6.76759 10.4888L6.60018 11.7165L6.89743 11.757ZM6.24097 12.2559C6.56002 12.2994 6.85392 12.0761 6.89743 11.757L6.60018 11.7165C6.57906 11.8714 6.43638 11.9798 6.2815 11.9587L6.24097 12.2559ZM5.74206 11.5995C5.69855 11.9185 5.92192 12.2124 6.24097 12.2559L6.2815 11.9587C6.12662 11.9376 6.01819 11.7949 6.03931 11.64L5.74206 11.5995ZM5.89351 10.4888L5.74206 11.5995L6.03931 11.64L6.19076 10.5293L5.89351 10.4888ZM4.98475 10.6591H6.04214V10.3591H4.98475V10.6591ZM4.40172 10.076C4.40172 10.398 4.66275 10.6591 4.98475 10.6591V10.3591C4.82844 10.3591 4.70172 10.2323 4.70172 10.076H4.40172ZM4.98475 9.493C4.66275 9.493 4.40172 9.75404 4.40172 10.076H4.70172C4.70172 9.91972 4.82844 9.793 4.98475 9.793V9.493ZM6.16024 9.493H4.98475V9.793H6.16024V9.493ZM6.25759 7.81891L6.01161 9.62274L6.30886 9.66327L6.55484 7.85945L6.25759 7.81891ZM4.98475 7.98918H6.40621V7.68918H4.98475V7.98918ZM4.40172 7.40615C4.40172 7.72815 4.66275 7.98918 4.98475 7.98918V7.68918C4.82844 7.68918 4.70172 7.56246 4.70172 7.40615H4.40172ZM8.7119 9.66327L8.95788 7.85945L8.66063 7.81891L8.41465 9.62274L8.7119 9.66327ZM7.28029 7.98918H8.80925V7.68918H7.28029V7.98918ZM7.18294 9.66327L7.42892 7.85945L7.13167 7.81891L6.88569 9.62274L7.18294 9.66327ZM8.56328 9.493H7.03432V9.793H8.56328V9.493Z" fill="currentColor"></path>
              </svg>
              <span class="tag-txt">{{ detailList.topic }}</span>
              <span class="iconfont icon-icon-xiangyou1" style="font-size: 10px"></span>
            </a>
          </div>
        </div>
        <!--标签-->
        <div v-for="(item,index) in detailList.tags" :key="index" class="tag not-btn-tag">
          <div class="firstchannel-tag">
            <a :href="item.ahref" target="_blank" class="tag-link topic-link">{{ item }}</a>
          </div>
        </div>
        <!--展开更多-->
        <div v-if="textWidth > 624" class="tag">
          <label for="toggle" style="cursor:pointer;">
            <div class="show-more-btn unfold">
              <span class="iconfont icon-xiangxia" style="font-size: 12px"></span>
              <span v-if="false" class="iconfont icon-xiangshang" style="font-size: 12px"></span>
            </div>
          </label>
        </div>
        <!--隐藏标签-->
        <div v-for="(item,index) in hideLabelList" :key="index" class="tag not-btn-tag">
          <div class="firstchannel-tag">
            <a :href="item.ahref" target="_blank" class="tag-link topic-link">{{ item.title }}</a>
          </div>
        </div>
      </div>
    </div>

    <div class="b-img" @click="$util.goBlank('advertisement')">
        <img width="668" src="https://images.weserv.nl/?url=//i0.hdslb.com/bfs/sycp/creative_img/202303/d8f5f24cc1bff5ed317cbae55361d23f.jpg@!web-video.webp" alt="">
    </div>
  </div>
</template>

<script>
import {calculate} from '/src/util/utilNext.js'

export default {
    name: 'introductionContainer',
    data() {
        return {
            isClose: false,
            closeMsg: '展开更多',
            showClose: false,
            labelList:[],
            // 参与话题 需要从数据库加载值
            participate:'在剪一种很新的东西',
            textWidth:0,
            // 被隐藏的标签List
            hideLabelList:[],
        }
    },
    inject: [
        "detailList",
    ],
    created() {

      this.getDivWidth()
    },
    methods: {
      getDivWidth() {

        if (this.labelList === undefined || this.labelList.length < 0) return
        let textWidth = 0;
        if (this.participate === '') {
          textWidth = this.computerWidth(textWidth)
          console.log(textWidth)
        }else {
          // 总宽度
          textWidth = (calculate(this.participate) + 70);
          textWidth = this.computerWidth(textWidth)
          console.log(textWidth)
        }
        this.textWidth = textWidth
      },
      // 计算宽度
      computerWidth(textWidth){
        let index;
        for (let i = 0; i < this.labelList.length; i++) {
          let str = this.labelList[i].title
          // calculate(str) 计算盒子宽度
          // eslint-disable-next-line no-unused-vars
          textWidth += (calculate(str) + 36)
          if (textWidth > 624){
            // eslint-disable-next-line no-unused-vars
            index = i
            break
          }
        }
        if (index){
          this.hideLabelList = this.labelList.slice(index,this.labelList.length)
          //从第index个元素开始执行删除
          this.labelList.splice(index)
        }
        return textWidth
      },


      changeClose() {
            this.isClose = !this.isClose
            if (this.isClose) {
                this.closeMsg = '展开更多'
            } else {
                this.closeMsg = '收起'
            }
        },

    },
    updated() {
    },
    mounted() {
      // 当简介大于三行时截断
      const container = this.$refs.iContainer
      const containerHeight = container.getBoundingClientRect().height;
      if (containerHeight > 84){
        this.isClose = !this.isClose
        this.showClose = !this.showClose
      }
      // const charWidth = 13;
      // const containerWidth = container.getBoundingClientRect().width;
      // const charsPerLine = Math.floor(containerWidth / charWidth);
    },
}
</script>

<style scoped>
.desc-info-text {
    white-space: pre-line;
    word-break: break-all;
    /*font-size: 15px;*/
    color: #18191C;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: 20px;
    font-size: 14px;
}

.introduction-container {
    /*border-bottom: 1px solid #E3E5E7;*/
    padding-bottom: 10px;
}

.introduction-close {
    height: 84px;
    overflow: hidden;
}


.toggle-show {
  margin-top: 5px;
    font-size: 13px;
    color: #61666d;
}

.b-img {
    padding: 20px 0;
    cursor: pointer;
}
.video-tag-container {
  margin-top: 18px;
  padding-bottom: 10px;
  /*padding-bottom: 6px;*/
  /*margin: 16px 0 20px 0;*/
  border-bottom: 1px solid #E3E5E7;
}
.tag-panel{
  display: flex;
  flex-wrap: wrap;
  max-height: 40px;
  transition: max-height 0.5s;
  overflow: hidden;
}
#toggle:checked + .tag-panel {
  max-height: 120px /* 40px * 3或4 px 实际高度大概是 120px 到 160px */
}
.tag {
  float: left;
  margin: 0 12px 8px 0;
}
.unfold {
  transform: rotate(180deg);
}
.show-more-btn {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background: #F1F2F3;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  color: #61666D;
}
.topic-link {
  max-width: 307px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  font-size: 13px;
}
.tag-link {
  color: #61666D;
  background: #f1f2f3;
  padding: 0 12px;
  box-sizing: border-box;
  transition: all .3s;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.tag-txt {
  margin: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
